import { EditOutlined } from "@ant-design/icons";
import { NullAble } from "@pangza-club/utils/types";
import { Avatar, Button, Col, Row, Tag } from "antd";
import UserHeaderPng from '@/assets/image/login_bg.png';

interface IProps {
    userData: NullAble<UserVO>;
    setEditeState: (value: boolean) => void
}

const Profile = (props: IProps) => {
    const { userData } = props;
    return <Row gutter={32}>
        <Col span={8}>
            <div className="user-avatar-container">
                <Avatar size={120} src={userData?.avatar || UserHeaderPng} />
                <h2 className="user-name">{userData?.nickName}</h2>
                <Tag color="#417ff9">普通用户</Tag>
                <Button
                    type="primary"
                    icon={<EditOutlined />}
                    className="edit-profile-btn"
                    onClick={() => props.setEditeState(true)}
                >
                    编辑资料
                </Button>
            </div>
        </Col>
        <Col span={16}>
            <div className="user-info-container">
                <h3 className="section-title">基本信息</h3>
                <Row gutter={[24, 24]} className="user-info-section">
                    <Col span={12} className="user-info-item">
                        <div className="info-label">邮箱</div>
                        <div className="info-value">{userData?.email}</div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">手机号</div>
                        <div className="info-value">{userData?.phone}</div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">性别</div>
                        <div className="info-value">
                            {userData?.sex == '1' ? '男': '女'}
                        </div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">所在地</div>
                        <div className="info-value">{userData?.address}</div>
                    </Col>
                </Row>

                <h3 className="section-title">职业信息</h3>
                <Row gutter={[24, 24]} className="user-info-section">
                    <Col span={12} className="user-info-item">
                        <div className="info-label">公司</div>
                        <div className="info-value">{userData?.company}</div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">职位</div>
                        <div className="info-value">{userData?.position}</div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">个人网站</div>
                        <div className="info-value">
                            <a href={userData?.personalWebsite} target="_blank" rel="noopener noreferrer" className="website-link">
                                {userData?.personalWebsite}
                            </a>
                        </div>
                    </Col>
                    <Col span={12} className="user-info-item">
                        <div className="info-label">加入时间</div>
                        <div className="info-value">{userData?.joinDate}</div>
                    </Col>
                </Row>

                <h3 className="section-title">个人描述</h3>
                <div className="user-info-section description-section">
                    <div className="info-value description">{userData?.description || '暂无描述'}</div>
                </div>
            </div>
        </Col>
    </Row>
}

export default Profile;